<template>
	<div class="event-info">
		<Notice></Notice>
		<u-navbar :is-back="true" :title="topData.top.title" class="topbar"></u-navbar>
		<div class="dataview loading-box">
			<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
			<div class="top flex">
				<div class="item flex">
					<span class="label">相关信息</span>
					<span class="value">{{ topData.top.total }}</span>
				</div>
				<div class="item flex">
					<span class="label">近一小时增量</span>
					<span class="value">{{ topData.top.increment_hour }}</span>
				</div>
				<div class="item flex">
					<span class="label">情感指数</span>
					<span class="value" v-if="topData.top.emotion">{{ (topData.top.emotion*100).toFixed(2) }}</span>
				</div>
				<div class="item flex">
					<span class="label">上热搜数</span>
					<span class="value" v-if="topData.hotpoint">{{ topData.hotpoint.length }}</span>
				</div>
			</div>
			<div class="bottom">
				<div class="media-a flex">
					<span class="label">央级媒体</span>
					<u-line-progress class="progress" active-color="#1E62FC" :percent="topData.top.top_media_ratio.replace('%','')/1" height="24"></u-line-progress>
					<span class="count">{{ topData.top.top_media_count }}家</span>
				</div>
				<div class="media-b flex">
					<span class="label">省级媒体</span>
					<u-line-progress class="progress" active-color="#F69200" :percent="topData.top.middle_media_ratio.replace('%','')/1" height="24"></u-line-progress>
					<span class="count">{{ topData.top.middle_media_count }}家</span>
				</div>
			</div>
		</div>
		<u-sticky :offset-top="navbarHeight+70">
		<div class="tab tab-flow flex">
			<span class="tab-i" :class="current==index && 'tab-in'" v-for="(item,index) in tabs" :key="index" @click="change(index)">{{item.name}}</span>
		</div>
		</u-sticky>
		
		<!-- 事件总括 -->
		<div class="block sjzk" ref="sjzk">
			<!-- 事件概况 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
				<div class="title">事件概况</div>
				<u-parse class="content" :html="topData.overview_top"></u-parse>
			</div>
			<!-- 首发媒体 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
				<div class="title">首发媒体</div>
				<u-table class="table first-publish">
					<u-tr>
						<u-th>类型</u-th>
						<u-th>来源</u-th>
						<u-th>作者</u-th>
						<u-th>时间</u-th>
						<u-th>标题</u-th>
					</u-tr>
					<u-tr v-for="(item, index) in topData.first_publish" :key="index">
						<u-td>{{ item.label }}</u-td>
						<u-td>{{ item.gather_site_name }}</u-td>
						<u-td>{{ item.publisher_name }}</u-td>
						<u-td class="date">{{ $u.timeFormat(item.publish_time*1000, "yyyy-mm-dd hh:MM") }}</u-td>
						<u-td class="text-cut3">{{ item.title }}</u-td>
					</u-tr>
				</u-table>
			</div>
			<!-- 脉络 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
				<div class="title">脉络</div>
				<u-time-line class="context">
					<u-time-line-item v-for="(item,index) in topData.trend_content" :key="index">
						<template v-slot:content>
							<div class="item">
								<div class="date">{{ item.date }}</div>
								<div class="text">{{ item.title }}</div>
							</div>
						</template>
					</u-time-line-item>
				</u-time-line>
			</div>
			<!-- 发展趋势 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
				<div class="title">发展趋势</div>
				<div class="chart-box">
					<div class="ctabs flex">
						<span class="ctab" :class="chartTabIndex.fzqs == 'day' && 'on'" @click="chartTabChange('fzqs','day')">按天</span>
						<span class="ctab" :class="chartTabIndex.fzqs == 'hour' && 'on'" @click="chartTabChange('fzqs','hour')">按小时</span>
					</div>
					<div class="chart chart-fzqs"><l-echart ref="chart_fzqs"></l-echart></div>
				</div>
			</div>
			<!-- 调性分析 -->
			<div class="box">
				<div class="title">倾向性趋势</div>
				<u-parse class="content" :html="topData.overview_sentiment"></u-parse>
				<div class="chart-box loading-box">
					<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
					<div class="ctabs flex">
						<span class="ctab" :class="chartTabIndex.qxxqs == 'day' && 'on'" @click="chartTabChange('qxxqs','day')">按天</span>
						<span class="ctab" :class="chartTabIndex.qxxqs == 'hour' && 'on'" @click="chartTabChange('qxxqs','hour')">按小时</span>
					</div>
					<div class="chart chart-qxxqs"><l-echart ref="chart_qxxqs"></l-echart></div>
				</div>
				<div class="title mt-20">倾向性分布</div>
				<div class="chart-box loading-box" style="min-height: 100rpx;">
					<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
					<div class="qxxfb flex" v-if="topData.sentiment_circle_data">
						<div class="item">
							<u-circle-progress active-color="#1E62FC" :percent="topData.sentiment_circle_data[0]">
								<div class="u-progress-content">
									<div class="u-progress-info">正面</div>
									<div class="u-progress-dot">{{ topData.sentiment_circle_data[0]+"%" }}</div>
								</div>
							</u-circle-progress>
							<div class="count">{{ topData.sentiment_circle[0].count }}</div>
						</div>
						<div class="item">
							<u-circle-progress active-color="#E6960C" :percent="topData.sentiment_circle_data[1]">
								<div class="u-progress-content">
									<div class="u-progress-info">中性</div>
									<div class="u-progress-dot">{{ topData.sentiment_circle_data[1]+"%" }}</div>
								</div>
							</u-circle-progress>
							<div class="count">{{ topData.sentiment_circle[1].count }}</div>
						</div>
						<div class="item">
							<u-circle-progress active-color="#E65441" :percent="topData.sentiment_circle_data[2]">
								<div class="u-progress-content">
									<div class="u-progress-info">负面</div>
									<div class="u-progress-dot">{{ topData.sentiment_circle_data[2]+"%" }}</div>
								</div>
							</u-circle-progress>
							<div class="count">{{ topData.sentiment_circle[2].count }}</div>
						</div>
					</div>
				</div>
				<div class="title mt-20">网民性别分布</div>
				<div class="chart-box chart-box-wmxbfb loading-box">
					<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
					<div class="chart chart-wmxbfb"><l-echart ref="chart_wmxbfb"></l-echart></div>
					<div class="count">
						<div class="count-a">{{ topData.gender_circle_total }}</div>
						<div class="count-b" v-if="!loading.top">总数</div>
					</div>
				</div>
				<div class="title mt-20">境内IP占比</div>
				<div class="chart-box chart-box-wmxbfb loading-box">
					<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
					<div class="chart chart-ip"><l-echart ref="chart_ip"></l-echart></div>
					<div class="count">
						<div class="count-a">{{ topData.ip_region_total }}</div>
						<div class="count-b" v-if="!loading.top">总数</div>
					</div>
				</div>
				<div class="title mt-20">地域分析</div>
				<div class="ctabs dytx-tabs flex">
					<span class="ctab" :class="chartTabIndex.dyfx == 'day' && 'on'" @click="chartTabChange('dyfx','day')">作者地域</span>
					<span class="ctab" :class="chartTabIndex.dyfx == 'hour' && 'on'" @click="chartTabChange('dyfx','hour')">信息发布地域</span>
				</div>
				<u-parse class="content" :html="chartTabIndex.dyfx == 'day'?topData.overview_loc_user:topData.overview_loc_publish"></u-parse>
				<div class="chart chart-dyfx loading-box">
					<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
					<l-echart ref="chart_dyfx"></l-echart>
				</div>
				<div class="subtitle">地域分布TOP10</div>
				<u-table class="table loading-box">
					<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
					<u-tr>
						<u-th>地区</u-th>
						<u-th>声量</u-th>
					</u-tr>
					<u-tr v-for="(item, index) in tableData.dyfx.slice(0,10)" :key="index">
						<u-td>{{ item.name }}</u-td>
						<u-td>{{ item.value }}</u-td>
					</u-tr>
				</u-table>
				<div class="title mt-20">热词事件</div>
				<div class="chart-box loading-box">
					<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
					<div class="chart chart-rcsj"><l-echart ref="chart_rcsj"></l-echart></div>
				</div>
				<div class="subtitle">关键词排行</div>
				<u-table class="table loading-box">
					<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
					<u-tr>
						<u-th>排名</u-th>
						<u-th>关键词</u-th>
						<u-th>词频</u-th>
					</u-tr>
					<u-tr v-for="(item, index) in topData.word_cloud.slice(0,10)" :key="index">
						<u-td>{{ index+1 }}</u-td>
						<u-td>{{ item.name }}</u-td>
						<u-td>{{ item.value }}</u-td>
					</u-tr>
				</u-table>
			</div>
		</div>
		<!-- 微博分析 -->
		<div class="block wbfx" ref="wbfx">
			<!-- 微博分析 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.weibo"><u-loading></u-loading></div>
				<div class="title">微博分析</div>
				<u-parse class="content" :html="weiboData.overview_wb"></u-parse>
			</div>
			<!-- 用户认证 -->
			<div class="box yhrz">
				<div class="title">用户认证</div>
				<div class="chart-box chart-box-wmxbfb loading-box">
					<div class="loading" v-if="loading.weibo"><u-loading></u-loading></div>
					<div class="chart chart-yhrz"><l-echart ref="chart_yhrz"></l-echart></div>
					<div class="count">
						<div class="count-a">{{ weiboData.verified_circle_total }}</div>
						<div class="count-b" v-if="!loading.weibo">总数</div>
					</div>
				</div>
			</div>
			<!-- 影响力排行 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.weibo"><u-loading></u-loading></div>
				<div class="title">影响力排行</div>
				<div class="ctabs cert-tabs flex">
					<span v-for="(item, index) in certtabs" :key="index" class="ctab" :class="certtabIndex == index && 'on'" @click="certtabIndex=index">{{ item }}</span>
				</div>
				<div class="cert-list flex" v-for="(item, index) in weiboData.verified_influence" :key="index" v-show="certtabs[certtabIndex]==item.name">
					<div class="cert-i flex" v-for="(citem, cindex) in item.data" :key="cindex">
						<u-avatar class="avatar" :src="citem.article.avatar" size="100"></u-avatar>
						<div class="cert-info">
							<div class="uname flex">
								<span class="text text-cut">{{ citem.article.publisher_name.slice(0,7) }}</span>
								<span v-if="citem.article.publisher_name.length>7">...</span>
								<i class="v-1" v-if="certtabIndex==4"></i>
								<i class="v-2" v-else-if="certtabIndex!=5"></i>
							</div>
							<div class="count"><span class="count-a">粉丝：</span><span class="count-b">1</span></div>
							<div class="count"><span class="count-a">发帖：</span><span class="count-b">1</span></div>
						</div>
					</div>
					<div class="empty" v-if="!item.data.length">暂无数据</div>
				</div>
			</div>
			<!-- 微博类型 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.weibo"><u-loading></u-loading></div>
				<div class="title">微博类型</div>
				<u-parse class="content" :html="weiboData.overview_wb_types"></u-parse>
			</div>
			<!-- 博文发展趋势 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.weibo"><u-loading></u-loading></div>
				<div class="title">博文发展趋势</div>
				<div class="chart-box">
					<div class="ctabs flex">
						<span class="ctab" :class="chartTabIndex.bwfzqs == 'day' && 'on'" @click="chartTabChange('bwfzqs','day')">按天</span>
						<span class="ctab" :class="chartTabIndex.bwfzqs == 'hour' && 'on'" @click="chartTabChange('bwfzqs','hour')">按小时</span>
					</div>
					<div class="chart chart-fzqs"><l-echart ref="chart_bwfzqs"></l-echart></div>
				</div>
			</div>
			<!-- 博文类型占比 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.weibo"><u-loading></u-loading></div>
				<div class="title">博文类型占比</div>
				<div class="chart-box chart-box-wmxbfb">
					<div class="chart chart-bwlxzb"><l-echart ref="chart_bwlxzb"></l-echart></div>
					<div class="count">
						<div class="count-a">{{ weiboData.verified_circle_total }}</div>
						<div class="count-b" v-if="!loading.weibo">总数</div>
					</div>
				</div>
			</div>
			<!-- 博主地域 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.weibo"><u-loading></u-loading></div>
				<div class="title">博主地域</div>
				<div class="chart-box chart-box-wmxbfb">
					<div class="chart chart-bzdy"><l-echart ref="chart_bzdy"></l-echart></div>
				</div>
			</div>
			<div class="box loading-box">
				<div class="loading" v-if="loading.weibo"><u-loading></u-loading></div>
				<u-table class="table">
					<u-tr>
						<u-th>地区</u-th>
						<u-th>声量</u-th>
					</u-tr>
					<u-tr v-for="(item, index) in tableData.bzdy.slice(0,10)" :key="index">
						<u-td>{{ item.name }}</u-td>
						<u-td>{{ item.value }}</u-td>
					</u-tr>
				</u-table>
			</div>
			<!-- 水军分析 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.weibo"><u-loading></u-loading></div>
				<div class="title">水军分析</div>
				<div class="chart-box chart-box-wmxbfb">
					<div class="chart chart-sjfx"><l-echart ref="chart_sjfx"></l-echart></div>
					<div class="count">
						<div class="count-a">1348</div>
						<div class="count-b">总数</div>
					</div>
				</div>
			</div>
			<!-- 情感分析 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.weibo"><u-loading></u-loading></div>
				<div class="title">情感分析</div>
				<div class="chart-box chart-box-wmxbfb">
					<div class="chart chart-qgfx"><l-echart ref="chart_qgfx"></l-echart></div>
					<div class="count">
						<div class="count-a">{{ weiboData.verified_circle_total }}</div>
						<div class="count-b">总数</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 媒体分析 -->
		<div class="block mtfx" ref="mtfx">
			<!-- 媒体分析 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
				<div class="title">媒体分析</div>
				<u-parse class="content" :html="topData.overview_media"></u-parse>
			</div>
			<!-- 媒体来源 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
				<div class="title">媒体来源</div>
				<div class="chart-box chart-box-mtly">
					<div class="chart chart-mtly"><l-echart ref="chart_mtly"></l-echart></div>
					<div class="count">
						<div class="count-a">{{ topData.media_analysis.media_circle_data_total }}</div>
						<div class="count-b" v-if="!loading.top">总数</div>
					</div>
				</div>
			</div>
			<!-- 媒体活跃度 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
				<div class="title">媒体活跃度</div>
				<div class="chart-box chart-box-mthy">
					<div class="chart chart-mthy"><l-echart ref="chart_mthy"></l-echart></div>
				</div>
			</div>
			<!-- 重点媒体 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.top"><u-loading></u-loading></div>
				<div class="title">重点媒体</div>
				<div class="media-cards flex" v-if="topData.media_analysis.top_media_count">
					<div class="media-card media-card-1 flex">
						<div class="l">
							<div class="l-title">央级媒体参与度</div>
							<div class="l-count">{{topData.media_analysis.top_media_count}}家</div>
						</div>
						<div class="r">
							<u-circle-progress active-color="#fff" bg-color="transparent" :percent="topData.media_analysis.top_media_ratio.replace('%','')/1" width="110" border-width="6" inactive-color="rgba(255,255,255,0.2)">
								<div class="u-progress-content">
									<div class="u-progress-info">{{topData.media_analysis.top_media_ratio}}</div>
								</div>
							</u-circle-progress>
						</div>
					</div>
					<div class="media-card media-card-2 flex">
						<div class="l">
							<div class="l-title">省级媒体参与度</div>
							<div class="l-count">{{topData.media_analysis.middle_media_count}}家</div>
						</div>
						<div class="r">
							<u-circle-progress active-color="#fff" bg-color="transparent" :percent="topData.media_analysis.middle_media_ratio.replace('%','')/1" width="110" border-width="6" inactive-color="rgba(255,255,255,0.2)">
								<div class="u-progress-content">
									<div class="u-progress-info">{{topData.media_analysis.middle_media_ratio}}</div>
								</div>
							</u-circle-progress>
						</div>
					</div>
					<div class="media-card media-card-3 flex">
						<div class="l">
							<div class="l-title">地方媒体参与度</div>
							<div class="l-count">{{topData.media_analysis.normal_media_count}}家</div>
						</div>
						<div class="r">
							<u-circle-progress active-color="#fff" bg-color="transparent" :percent="topData.media_analysis.normal_media_ratio.replace('%','')/1" width="110" border-width="6" inactive-color="rgba(255,255,255,0.2)">
								<div class="u-progress-content">
									<div class="u-progress-info">{{topData.media_analysis.normal_media_ratio}}</div>
								</div>
							</u-circle-progress>
						</div>
					</div>
					<div class="media-card media-card-4 flex">
						<div class="l">
							<div class="l-title">其他媒体参与度</div>
							<div class="l-count">{{topData.media_analysis.other_media_count}}家</div>
						</div>
						<div class="r">
							<u-circle-progress active-color="#fff" bg-color="transparent" :percent="topData.media_analysis.other_media_ratio.replace('%','')/1" width="110" border-width="6" inactive-color="rgba(255,255,255,0.2)">
								<div class="u-progress-content">
									<div class="u-progress-info">{{topData.media_analysis.other_media_ratio}}</div>
								</div>
							</u-circle-progress>
						</div>
					</div>
				</div>
				<div class="ctabs dytx-tabs flex">
					<span class="ctab" v-for="(item, index) in mediatabs" :key="index" :class="mediatabIndex == item && 'on'" @click="mediatabIndex=item">{{ item }}</span>
				</div>
				<scroll-view class="media-list" scroll-y="true">
					<div class="thead flex">
						<span class="th col-1">排名</span>
						<span class="th col-2">媒体名称</span>
						<span class="th col-3">文章数量</span>
						<span class="th col-4">信源范围</span>
					</div>
					<div class="tr flex" v-for="(item, index) in tableData[mediatabIndex]" :key="index">
						<span class="td col-1" :class="'no-'+(index+1)">{{ index+1 }}</span>
						<span class="td col-2">{{ item.site_name }}</span>
						<span class="td col-3">{{ item.count }}</span>
						<span class="td col-4">{{ item.source }}</span>
					</div>
					<div class="empty" v-if="!tableData[mediatabIndex].length">暂无数据</div>
				</scroll-view>
			</div>
		</div>
		<!-- 评论分析 -->
		<div class="block plfx" ref="plfx">
			<!-- 评论分析概况 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.comment"><u-loading></u-loading></div>
				<div class="title">评论分析概况</div>
				<u-parse class="content" :html="commentData.overview_comments"></u-parse>
			</div>
			<!-- 评论时间走势 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.comment"><u-loading></u-loading></div>
				<div class="title">评论时间走势</div>
				<div class="chart-box">
					<div class="ctabs flex">
						<span class="ctab" :class="chartTabIndex.plsjzs == 'day' && 'on'" @click="chartTabChange('plsjzs','day')">按天</span>
						<span class="ctab" :class="chartTabIndex.plsjzs == 'hour' && 'on'" @click="chartTabChange('plsjzs','hour')">按小时</span>
					</div>
					<div class="chart chart-fzqs"><l-echart ref="chart_plsjzs"></l-echart></div>
				</div>
			</div>
			<!-- 影响力排行 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.comment"><u-loading></u-loading></div>
				<div class="title">影响力排行</div>
				<div class="ctabs dytx-tabs flex">
					<span class="ctab" v-for="(item, index) in dvpltabs" :key="index" :class="dvpltabIndex == index && 'on'" @click="dvpltabIndex=index">{{ item }}</span>
				</div>
				<div class="dvpl-list">
					<div class="dvpl-i flex" v-for="(item, index) in commentData.wb_v_comments[dvpltabIndex+1]" :key="index">
						<div class="no" :class="index<3 && 'red'">{{ index+1 }}</div>
						<div class="info">
							<div class="content text-cut2">{{ item.content }}</div>
							<div class="des flex">
								<span>{{ $u.timeFormat(item.publish_time*1000, "yyyy-mm-dd hh:MM") }}</span>
								<span>{{ item.publisher_site_name }}</span>
								<u-icon name="account" size="24" color="#888" :label="item.publisher_name" label-size="24"></u-icon>
								<span>发布于{{ item.province }}</span>
							</div>
						</div>
					</div>
					<div class="empty" v-if="!commentData.wb_v_comments[dvpltabIndex+1].length">暂无数据</div>
				</div>
			</div>
		</div>
		<!-- 观点分析 -->
		<div class="block gdfx" ref="gdfx">
			<!-- 网民观点 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.viewpoint"><u-loading></u-loading></div>
				<div class="title">观点分析</div>
				<div class="title">网民观点</div>
				<div class="vp-list">
					<div class="empty" v-if="vpData.viewpoint && !vpData.viewpoint.length">暂无数据</div>
					<div class="vp-i" v-for="(item, index) in vpData.viewpoint" :key="index">
						<div class="content flex">
							<div class="l text-cut">{{ item.keyword }}</div>
							<div class="r">
								<span class="count">{{ item.count }}</span>
								<span class="ratio">{{ item.ratio }}%</span>
							</div>
						</div>
						<u-line-progress class="progress" active-color="#1E62FC" :percent="item.ratio" :show-percent="false" height="15"></u-line-progress>
					</div>
				</div>
			</div>
			<!-- 重点微博 -->
			<div class="box loading-box">
				<div class="loading" v-if="loading.weibo"><u-loading></u-loading></div>
				<div class="title">重点微博</div>
				<div class="ctabs dytx-tabs flex">
					<span class="ctab" v-for="(item, index) in weibotabs" :key="index" :class="weibotabIndex == item.value && 'on'" @click="weibotabIndex=item.value">{{ item.label }}</span>
				</div>
				<div class="focus-list">
					<div class="wb-i" v-for="(item, index) in weiboData.vital_weibo[weibotabIndex]" :key="index">
						<div class="info flex">
							<u-avatar class="avatar" :src="item.avatar" size="100"></u-avatar>
							<div class="user">
								<div class="uname flex">
									{{ item.publisher_name }}
									<i class="v-2" v-if="item.verified == 2"></i>
									<i class="v-1" v-else></i>
								</div>
								<div class="date">{{ $u.timeFormat(item.publish_time*1000, "yyyy-mm-dd hh:MM") }}</div>
							</div>
						</div>
						<div class="content text-cut2">{{ item.content }}</div>
					</div>
					<div class="empty" v-if="!weiboData.vital_weibo[weibotabIndex].length">暂无数据</div>
				</div>
			</div>
		</div>

		<!-- 文章弹窗 -->
		<ArticleList :show="$store.state.isEventArticle" :title="title" :queryParams="params" :eid="id"></ArticleList>
		<u-back-top :scroll-top="scrollTop" bottom="80"></u-back-top>
	</div>
</template>

<script>
import * as echarts from "echarts";
import "@/uni_modules/lime-echart-wordcloud";
import chinaJSON from "@/common/china.json";
import { reportTop, reportWeibo, reportComment, reportViewpoint } from "@/api/event.js";
import ArticleList from "@/components/eventArticleList.vue";

export default {
	components: {
		ArticleList,
	},
	data() {
		return {
			navbarHeight: 0,
			scrollTop: 0,
			tabTop: 0,
			tabStyle: {
				top: 0
			},
			tabHeight: 0,
			
			id: "",
			tabs: [
				{
					name: "事件总括",
					value: "sjzk"
				}, 
				{
					name: "微博分析",
					value: "wbfx"
				},
				{
					name: "媒体分析",
					value: "mtfx"
				},
				{
					name: "评论分析",
					value: "plfx"
				},
				{
					name: "观点分析",
					value: "gdfx"
				},
			],
			loading: {
				top: false,
				weibo: false,
				comment: false,
				viewpoint: false
			},
			current: 0,
			topData: {
				top: {
					top_media_ratio: "",
					middle_media_ratio: ""
				},
				word_cloud: [],
				media_analysis: {
					media_circle_data_total: "",
				}
			},
			weiboData: {
				vital_weibo: {
					total: []
				}
			},
			commentData: {
				wb_v_comments: {
					1: [],
					2: [],
					3: []
				}
			},
			vpData: {},
			chartTabIndex: {
				fzqs: "day",
				qxxqs: "day",
				dyfx: "day",
				dytj: "day",
				bwfzqs: "day",
				plsjzs: "day",
			},
			option:{
				fzqs: {},
				qxxqs: {},
				wmxbfb: {},
				ip: {},
				mtfb: {},
				dytj: {},
				rcsj: {},
				yhrz: {},
				bwfzqs: {},
				bwlxzb: {},
				bzdy: {},
				sjfx: {},
				qgfx: {},
				mtly: {},
				plsjzs: {},
			},
			tableData: {
				dyfx: [],
				bzdy: [],
				全部: [],
				央级: [],
				省级: [],
				地方: [],
				其他: [],
			},
			mediatabs: [
				"全部",
				"央级",
				"省级",
				"地方",
				"其他",
			],
			mediatabIndex: "全部",
			certtabs: [
				"政府(蓝V)",
				"企业(蓝V)",
				"媒体(蓝V)",
				"其他(蓝V)",
				"橙V",
				"普通用户"
			],
			certtabIndex: 0,
			dvpltabs: ["负面","中性","正面"],
			dvpltabIndex: 0,
			weibotabs: [
				{ label: "综合", value: "total" },
				{ label: "政府", value: "gov" },
				{ label: "媒体", value: "media" },
				{ label: "名人", value: "famous" },
			],
			weibotabIndex: "total",

			title: "",
			params: {},
		}
	},
	onLoad: function (option){
		this.id = option.id;
		this.refresh();
	},
	onUnload() {
		this.$store.state.isEventArticle = false;
	},
	mounted() {
		this.$nextTick(()=>{
			uni.createSelectorQuery().select(".topbar").boundingClientRect(data => {
				this.navbarHeight = data.height;
				this.tabStyle.top = "100rpx";
			}).exec();
			uni.createSelectorQuery().select(".tab-flow").boundingClientRect(data => {
				this.tabHeight = data.height;
				this.tabTop = data.top;
			}).exec();
		});
	},
	onPageScroll: function(e){
		this.scrollTop = e.scrollTop;
	},
	methods: {
		change(val) {
			this.current = val;
			uni.createSelectorQuery().select("."+this.tabs[val].value).boundingClientRect(data => {
				uni.pageScrollTo({
					scrollTop: data.top + this.scrollTop - this.navbarHeight - this.tabHeight,
					duration: 0,
				});
			}).exec();
		},
		refresh() {
			this.getReportTop();
			this.getReportWeibo();
			this.getReportComment();
			this.getVpComment();
		},
		async getReportTop() {
			this.loading.top = true;
			let res = await reportTop({event_id: this.id});
			this.loading.top = false;
			this.topData = res.data;
			this.topData.sentiment_circle_data = [];
			this.topData.sentiment_circle.map(item=>{
				this.topData.sentiment_circle_data.push(
					this.topData.sentiment_circle_total == 0 ? 0 : ((item.count/this.topData.sentiment_circle_total)*100).toFixed(2)/1
				);
			});
			this.topData.ip_region_total = parseInt(this.topData.ip_region[0].count+this.topData.ip_region[1].count+this.topData.ip_region[2].count);
			this.tableData["全部"] = [
				...this.topData.media_analysis.statistics_sites["央级媒体"]?this.topData.media_analysis.statistics_sites["央级媒体"]:[],
				...this.topData.media_analysis.statistics_sites["省级媒体"]?this.topData.media_analysis.statistics_sites["省级媒体"]:[],
				...this.topData.media_analysis.statistics_sites["地方媒体"]?this.topData.media_analysis.statistics_sites["地方媒体"]:[],
				...this.topData.media_analysis.statistics_sites["其他"]?this.topData.media_analysis.statistics_sites["其他"]:[],
			];
			this.tableData["央级"] = this.topData.media_analysis.statistics_sites["央级媒体"];
			this.tableData["省级"] = this.topData.media_analysis.statistics_sites["省级媒体"];
			this.tableData["地方"] = this.topData.media_analysis.statistics_sites["地方媒体"];
			this.tableData["其他"] = this.topData.media_analysis.statistics_sites["其他"];

			this.fzqsChartSet();
			this.qxxqsChartSet();
			this.wmxbfbChartSet();
			this.ipChartSet();
			this.dyfxChartSet();
			this.rcsjChartSet();
			this.mtlyChartSet();
			this.mthyChartSet();
		},
		async getReportWeibo() {
			this.loading.weibo = true;
			let res = await reportWeibo({event_id: this.id});
			this.loading.weibo = false;
			this.weiboData = res.data;

			this.yhrzChartSet();
			this.bwfzqsChartSet();
			this.bwlxzbChartSet();
			this.bzdyChartSet();
			this.sjfxChartSet();
			this.qgfxChartSet();
		},
		async getReportComment() {
			this.loading.comment = true;
			let res = await reportComment({event_id: this.id});
			this.loading.comment = false;
			this.commentData = res.data;
			this.plsjzsChartSet();
		},
		async getVpComment() {
			this.loading.viewpoint = true;
			let res = await reportViewpoint({event_id: this.id});
			this.loading.viewpoint = false;
			this.vpData = res.data;
			this.vpData.viewpoint = res.data.viewpoint.slice(0, 10);
		},

		fzqsChartSet() {
			let legend_data = this.topData.trend_day.data.map(item=>item.name);
			let x_day = this.topData.trend_day.date.map(item=>this.$u.timeFormat(item*1000, "yyyy-mm-dd"));
			let x_hour = this.topData.trend_hour.date.map(item=>this.$u.timeFormat(item*1000, "yyyy-mm-dd hh:MM"));
			let y_day = this.topData.trend_day.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});
			let y_hour = this.topData.trend_hour.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});

			this.option.fzqs = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#6a7985"
						}
					}
				},
				legend: {
					data: legend_data,
					top: "3rpx",
					textStyle: {
						fontSize: 12
					}
				},
				grid: {
					left: "10rpx",
					right: "40rpx",
					top: "100rpx",
					bottom: "50rpx",
					containLabel: true
				},
				xAxis: [
					{
						type: "category",
						boundaryGap: false,
						data: this.chartTabIndex.fzqs=='hour' ? x_hour : x_day
					}
				],
				dataZoom: [
					{
						start: 0,
						end: 100,
						height: 20
					}
				],
				yAxis: [
					{
						type: "value"
					}
				],
				series: this.chartTabIndex.fzqs=='hour' ? y_hour : y_day
			};
			this.$refs.chart_fzqs.init(echarts, chart => {
				chart.setOption(this.option.fzqs);
				chart.on("click",(params)=>{
					let date = this.option.fzqs.xAxis[0].data[params.data.coord[0]];
					this.params = {
						event_id: this.id,
						trend_key: this.topData.trend_day.data[params.seriesIndex].key+"",
						date_type: 6,
						date_time: []
					};
					if(this.chartTabIndex.fzqs=="hour"){
						this.params.date_time = [date+":00",date.split(":")[0]+":59:59"];
					}else{
						this.params.date_time = [date+" 00:00:00",date+" 23:59:59"];
					}
					this.title = `发展趋势—${legend_data[params.seriesIndex]}`;
					
					this.$store.state.isEventArticle = true;
					this.$store.state.isRefreshEventArticleList = new Date().getTime();
				});
			});
		},
		qxxqsChartSet() {
			let legend_data = this.topData.sentiment_day.data.map(item=>item.name);
			let x_day = this.topData.sentiment_day.date.map(item=>this.$u.timeFormat(item*1000, "yyyy-mm-dd"));
			let x_hour = this.topData.sentiment_hour.date.map(item=>this.$u.timeFormat(item*1000, "yyyy-mm-dd hh:MM"));
			let y_day = this.topData.sentiment_day.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});
			let y_hour = this.topData.sentiment_hour.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});

			this.option.qxxqs = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#6a7985"
						}
					}
				},
				legend: {
					data: legend_data,
					top: "3rpx",
					textStyle: {
						fontSize: 12
					}
				},
				grid: {
					left: "10rpx",
					right: "40rpx",
					top: "70rpx",
					bottom: "50rpx",
					containLabel: true
				},
				xAxis: [
					{
						type: "category",
						boundaryGap: false,
						data: this.chartTabIndex.qxxqs=='hour' ? x_hour : x_day
					}
				],
				dataZoom: [
					{
						start: 0,
						end: 100,
						height: 20
					}
				],
				yAxis: [
					{
						type: "value"
					}
				],
				series: this.chartTabIndex.qxxqs=='hour' ? y_hour : y_day
			};
			this.$refs.chart_qxxqs.init(echarts, chart => {
				chart.setOption(this.option.qxxqs);
				chart.on("click",(params)=>{
					let date = this.option.qxxqs.xAxis[0].data[params.data.coord[0]];
					this.params = {
						event_id: this.id,
						trend_sentiment: this.topData.sentiment_day.data[params.seriesIndex].key+"",
						date_type: 6,
						date_time: []
					};
					if(this.chartTabIndex.qxxqs=="hour"){
						this.params.date_time = [date+":00",date.split(":")[0]+":59:59"];
					}else{
						this.params.date_time = [date+" 00:00:00",date+" 23:59:59"];
					}
					this.title = `倾向性趋势—${legend_data[params.seriesIndex]}`;
					
					this.$store.state.isEventArticle = true;
					this.$store.state.isRefreshEventArticleList = new Date().getTime();
				});
			});
		},
		wmxbfbChartSet() {
			let cicleData = this.topData.gender_circle.map(item=>{
				return {
					value: item.count,
					name: item.label,
					key: item.key
				}
			});
			this.option.wmxbfb = {
				tooltip: {
					trigger: "item",
					formatter: "{b}：{c}（{d}%）"
				},
				legend: {
					data: cicleData.map(item=>item.name),
					top: "20rpx"
				},
				color:["#3E59FF","#FD5C47","#FFDC24"],
				series: [
					{
						type: "pie",
						selectedMode: "single",
						center: ["50%", "55%"],
						radius: ["40%", "55%"],
						label: {
							show: true,
							fontSize: 10,
							formatter: "{b}：{d}%"
						},
						data: cicleData
					}
				]
			};
			this.$refs.chart_wmxbfb.init(echarts, chart => {
				chart.setOption(this.option.wmxbfb);
				chart.on("click",(params)=>{
					this.params = {
						event_id: this.id,
						gender: this.topData.gender_circle[params.dataIndex].key,
					};
					this.title = `网民性别分布—${params.data.name}`;
					
					this.$store.state.isEventArticle = true;
					this.$store.state.isRefreshEventArticleList = new Date().getTime();
				});
			});
		},
		ipChartSet() {
			let cicleData = this.topData.ip_region.map(item=>{
				return {
					value: item.count,
					name: item.label,
					key: item.key
				}
			});
			this.option.ip = {
				tooltip: {
					trigger: "item",
					formatter: "{b}：{c}（{d}%）"
				},
				legend: {
					data: cicleData.map(item=>item.name),
					top: "20rpx"
				},
				color:["#3E59FF","#FD5C47","#FFDC24"],
				series: [
					{
						type: "pie",
						selectedMode: "single",
						center: ["50%", "55%"],
						radius: ["40%", "55%"],
						label: {
							show: true,
							fontSize: 10,
							formatter: "{b}：{d}%"
						},
						data: cicleData
					}
				]
			};
			this.$refs.chart_ip.init(echarts, chart => {
				chart.setOption(this.option.ip);
			});
		},
		dyfxChartSet() {
			if(this.chartTabIndex.dyfx == "day"){
				this.tableData.dyfx = [...this.topData.location_user.map(item => {
					return {
						name: item.name.replace(/市|省|自治区|回族|壮族|维吾尔族|特别行政区/g,""),
						value: item.value
					}
				}), {name: "南海诸岛",value: 0}];
			}else{
				this.tableData.dyfx = [...this.topData.location_publish.map(item => {
					return {
						name: item.name.replace(/市|省|自治区|回族|壮族|维吾尔族|特别行政区/g,""),
						value: item.value
					}
				}), {name: "南海诸岛",value: 0}];
			}

			echarts.registerMap("china", chinaJSON);
			this.option.dyfx = {
				tooltip: {
					formatter: "{b0}: {c0}"
				},
				visualMap: {
					min: 0,
					max: this.tableData.dyfx[0].value,
					itemHeight: 80,
					itemWidth: 10,
					left: "left",
					top: "bottom",
					text: ["高","低"],
					calculable: true,
					color: ["#145AFB", "#FFFFFF"]
				},
				series: [
					{
						type: "map",
						map: "china",
						roam: false,
						zoom: 1.2,
						label: { 
							show: true,
							fontSize: 10
						},
						emphasis: { 
							label: { 
								show: true,
							},
							itemStyle:{
								areaColor: "#145AFB"
							}
						},
						top: "10%",
						data: this.tableData.dyfx
					}
				]
			};
			this.$refs.chart_dyfx.init(echarts, chart => {
				chart.setOption(this.option.dyfx);
			});
		},
		rcsjChartSet() {
			this.option.rcsj = {
				title: {
					text: !this.topData.word_cloud.length ? "暂无数据" : "",
					textStyle: {
						color: "#999",
						fontSize: 12,
						fontWeight: "normal",
					},
					left: "center",
					top: "center"
				},
				series: [ {
					type: "wordCloud",
					// gridSize: -1,
					sizeRange: [6, 30],
					rotationRange: [-30, 30],
					shape: "pentagon",
					width: "100%",
					height: "95%",
					// wait: 100,
					// drawOutOfBound: true,
					textStyle: {
						color: function () {
							return "rgb(" + [
								Math.round(Math.random() * 160),
								Math.round(Math.random() * 160),
								Math.round(Math.random() * 160)
							].join(",") + ")";
						}
					},
					data: this.topData.word_cloud
				}]
			};
			this.$refs.chart_rcsj.init(echarts, chart => {
				chart.setOption(this.option.rcsj);
			});
		},
		yhrzChartSet() {
			let cicleData = this.weiboData.verified_circle.map(item=>{
				return {
					value: item.count,
					name: item.label,
					key: item.key
				}
			});
			this.option.yhrz = {
				tooltip: {
					trigger: "item",
					formatter: "{b}：{c}（{d}%）"
				},
				legend: {
					data: cicleData.map(item=>item.name),
					top: "20rpx"
				},
				color:["#3E59FF","#FD5C47","#FFDC24"],
				series: [
					{
						type: "pie",
						selectedMode: "single",
						center: ["50%", "55%"],
						radius: ["40%", "55%"],
						label: {
							show: true,
							fontSize: 10,
							formatter: "{b}：{d}%"
						},
						data: cicleData
					}
				]
			};
			this.$refs.chart_yhrz.init(echarts, chart => {
				chart.setOption(this.option.yhrz);
			});
		},
		bwfzqsChartSet() {
			let legend_data = this.weiboData.wb_types_day_trend.data.map(item=>item.name);
			let x_day = this.weiboData.wb_types_day_trend.date.map(item=>this.$u.timeFormat(item*1000, "yyyy-mm-dd"));
			let x_hour = this.weiboData.wb_types_hour_trend.date.map(item=>this.$u.timeFormat(item*1000, "yyyy-mm-dd hh:MM"));
			let y_day = this.weiboData.wb_types_day_trend.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});
			let y_hour = this.weiboData.wb_types_hour_trend.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});

			this.option.bwfzqs = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#6a7985"
						}
					}
				},
				legend: {
					data: legend_data,
					top: "3rpx",
					textStyle: {
						fontSize: 12
					}
				},
				grid: {
					left: "10rpx",
					right: "40rpx",
					top: "70rpx",
					bottom: "50rpx",
					containLabel: true
				},
				xAxis: [
					{
						type: "category",
						boundaryGap: false,
						data: this.chartTabIndex.bwfzqs=='hour' ? x_hour : x_day
					}
				],
				dataZoom: [
					{
						start: 0,
						end: 100,
						height: 20
					}
				],
				yAxis: [
					{
						type: "value"
					}
				],
				series: this.chartTabIndex.bwfzqs=='hour' ? y_hour : y_day
			};
			this.$refs.chart_bwfzqs.init(echarts, chart => {
				chart.setOption(this.option.bwfzqs);
				chart.on("click",(params)=>{
					let date = this.option.bwfzqs.xAxis[0].data[params.data.coord[0]];
					this.params = {
						event_id: this.id,
						module_type: 2,
						filter_type: [this.weiboData.wb_types_day_trend.data[params.seriesIndex].key],
						date_type: 6,
						date_time: []
					};
					if(this.chartTabIndex.bwfzqs=="hour"){
						this.params.date_time = [date+":00",date.split(":")[0]+":59:59"];
					}else{
						this.params.date_time = [date+" 00:00:00",date+" 23:59:59"];
					}
					this.title = `博文发展趋势—${legend_data[params.seriesIndex]}`;
					
					this.$store.state.isEventArticle = true;
					this.$store.state.isRefreshEventArticleList = new Date().getTime();
				});
			});
		},
		bwlxzbChartSet() {
			let cicleData = this.weiboData.wb_types_circle.map(item=>{
				return {
					value: item.count,
					name: item.label,
					key: item.key
				}
			});
			this.option.bwlxz = {
				tooltip: {
					trigger: "item",
					formatter: "{b}：{c}（{d}%）"
				},
				legend: {
					data: cicleData.map(item=>item.name),
					top: "20rpx"
				},
				color:["#3E59FF","#FD5C47","#FFDC24"],
				series: [
					{
						type: "pie",
						selectedMode: "single",
						center: ["50%", "55%"],
						radius: ["40%", "55%"],
						label: {
							show: true,
							fontSize: 10,
							formatter: "{b}：{d}%"
						},
						data: cicleData
					}
				]
			};
			this.$refs.chart_bwlxzb.init(echarts, chart => {
				chart.setOption(this.option.bwlxz);
			});
		},
		bzdyChartSet() {
			this.tableData.bzdy = [...this.weiboData.wb_location.map(item => {
				return {
					name: item.name.replace(/市|省|自治区|回族|壮族|维吾尔族|特别行政区/g,""),
					value: item.value
				}
			}), {name: "南海诸岛",value: 0}];

			echarts.registerMap("china", chinaJSON);
			this.option.bzdy = {
				tooltip: {
					formatter: "{b0}: {c0}"
				},
				visualMap: {
					min: 0,
					max: this.tableData.bzdy[0].value,
					itemHeight: 80,
					itemWidth: 10,
					left: "left",
					top: "bottom",
					text: ["高","低"],
					calculable: true,
					color: ["#145AFB", "#FFFFFF"]
				},
				series: [
					{
						type: "map",
						map: "china",
						roam: false,
						zoom: 1.2,
						label: { 
							show: true,
							fontSize: 10
						},
						emphasis: { 
							label: { 
								show: true,
							},
							itemStyle:{
								areaColor: "#145AFB"
							}
						},
						top: "10%",
						data: this.tableData.bzdy
					}
				]
			};
			this.$refs.chart_bzdy.init(echarts, chart => {
				chart.setOption(this.option.bzdy);
			});
		},
		sjfxChartSet() {
			this.option.sjfx = {
				tooltip: {
					trigger: "item",
					formatter: "{b}：{c}（{d}%）"
				},
				legend: {
					data: ["疑似水军", "真实用户"],
					top: "20rpx"
				},
				color:["#3E59FF","#FD5C47","#FFDC24"],
				series: [
					{
						type: "pie",
						selectedMode: "single",
						center: ["50%", "55%"],
						radius: ["40%", "55%"],
						label: {
							show: true,
							fontSize: 10,
							formatter: "{b}：{d}%"
						},
						data: [
							{ value: 300, name: "疑似水军" },
							{ value: 1048, name: "真实用户" }
						]
					}
				]
			};
			this.$refs.chart_sjfx.init(echarts, chart => {
				chart.setOption(this.option.sjfx);
			});
		},
		qgfxChartSet() {
			let cicleData = this.weiboData.wb_sentiment.map(item=>{
				return {
					value: item.count,
					name: item.label,
					key: item.key
				}
			});
			this.option.qgfx = {
				tooltip: {
					trigger: "item",
					formatter: "{b}：{c}（{d}%）"
				},
				legend: {
					data: cicleData.map(item=>item.name),
					top: "20rpx"
				},
				color:["#3E59FF","#FD5C47","#FFDC24"],
				series: [
					{
						type: "pie",
						selectedMode: "single",
						center: ["50%", "55%"],
						radius: ["40%", "55%"],
						label: {
							show: true,
							fontSize: 10,
							formatter: "{b}：{d}%"
						},
						data: cicleData
					}
				]
			};
			this.$refs.chart_qgfx.init(echarts, chart => {
				chart.setOption(this.option.qgfx);
			});
		},
		mtlyChartSet() {
			this.topData.media_analysis.media_circle_data_total = 0;
			let cicleData = this.topData.media_analysis.media_circle_data.map(item=>{
				this.topData.media_analysis.media_circle_data_total+=item.count; 
				return {
					value: item.count,
					name: item.label,
					key: item.key
				}
			});
			this.topData.media_analysis.media_circle_data_total = parseInt(this.topData.media_analysis.media_circle_data_total);
			this.option.mtly = {
				tooltip: {
					trigger: "item",
					formatter: "{b}：{c}（{d}%）"
				},
				legend: {
					data: cicleData.map(item=>item.name),
					top: "20rpx"
				},
				color:["#3E59FF","#FD5C47","#FFDC24"],
				series: [
					{
						type: "pie",
						selectedMode: "single",
						center: ["50%", "60%"],
						radius: ["40%", "55%"],
						label: {
							show: true,
							fontSize: 10,
							formatter: "{b}：{d}%"
						},
						data: cicleData
					}
				]
			};
			this.$refs.chart_mtly.init(echarts, chart => {
				chart.setOption(this.option.mtly);
			});
		},
		mthyChartSet() {
			let data = this.topData.media_analysis.media_site_data.reverse();
			this.option.mthy = {
				title: {
					text: !data.length ? "暂无数据" : "",
					textStyle: {
						color: "#999",
						fontSize: 12,
						fontWeight: "normal",
					},
					left: "center",
					top: "center"
				},
				tooltip: {
					trigger: "item",
				},
				grid: {
					top: "3%",
					left: "2%",
					right: "10%",
					bottom: "0%",
					containLabel: true
				},
				xAxis: [
					{
						type: "value",
						axisLabel: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						splitLine: {
							show: false,
						},
					},
				],
				yAxis: [
					{
						type: "category",
						data: data.map(item=>item.label),
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							inside: true,
							interval: 0,
							show: true,
							align: "left",
							margin: 0,
							padding: [0, 0, 10 ,0],
							verticalAlign : "bottom",
							color: "#333",
							fontSize: 12,
						},
					},
				],
				series: [
					{
						type: "bar",
						data: data.map(item=>item.count),
						barWidth: 8,
						label: {
							show: true,
							position: "right",
							fontSize: 12,
							color: "#0d56fd",
						},
						itemStyle: {
							color: "#0d56fd",
							borderRadius: 3,
						},
						showBackground: true,
						backgroundStyle: {
							color: "#EDF4FE",
							borderRadius: 3,
						}
					},
				]
			};
			this.$refs.chart_mthy.init(echarts, chart => {
				chart.setOption(this.option.mthy);
			});
		},
		plsjzsChartSet() {
			let legend_data = this.commentData.comments_day_trend.data.map(item=>item.name);
			let x_day = this.commentData.comments_day_trend.date.map(item=>this.$u.timeFormat(item*1000, "yyyy-mm-dd"));
			let x_hour = this.commentData.comments_hour_trend.date.map(item=>this.$u.timeFormat(item*1000, "yyyy-mm-dd hh:MM"));
			let y_day = this.commentData.comments_day_trend.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});
			let y_hour = this.commentData.comments_hour_trend.data.map(item=>{
				return {
					name: item.name,
					type: "line",
					smooth: true,
					areaStyle: {},
					markPoint: {
						data: [
							{ type: "max", name: "最高" },
						]
					},
					data: item.data
				}
			});

			this.option.plsjzs = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#6a7985"
						}
					}
				},
				legend: {
					data: legend_data,
					top: "3rpx",
					textStyle: {
						fontSize: 12
					}
				},
				grid: {
					left: "10rpx",
					right: "40rpx",
					top: "100rpx",
					bottom: "50rpx",
					containLabel: true
				},
				xAxis: [
					{
						type: "category",
						boundaryGap: false,
						data: this.chartTabIndex.plsjzs=='hour' ? x_hour : x_day
					}
				],
				dataZoom: [
					{
						start: 0,
						end: 100,
						height: 20
					}
				],
				yAxis: [
					{
						type: "value"
					}
				],
				series: this.chartTabIndex.plsjzs=='hour' ? y_hour : y_day
			};
			this.$refs.chart_plsjzs.init(echarts, chart => {
				chart.setOption(this.option.plsjzs);
				chart.on("click",(params)=>{
					let date = this.option.plsjzs.xAxis[0].data[params.data.coord[0]];
					this.params = {
						event_id: this.id,
						module_type: 3,
						trend_key: this.commentData.comments_day_trend.data[params.seriesIndex].key+"",
						date_type: 6,
						date_time: []
					};
					if(this.chartTabIndex.plsjzs=="hour"){
						this.params.date_time = [date+":00",date.split(":")[0]+":59:59"];
					}else{
						this.params.date_time = [date+" 00:00:00",date+" 23:59:59"];
					}
					this.title = `评论时间走势—${legend_data[params.seriesIndex]}`;
					
					this.$store.state.isEventArticle = true;
					this.$store.state.isRefreshEventArticleList = new Date().getTime();
				});
			});
		},

		chartTabChange(key, val) {
			switch(key){
				case "fzqs":
					this.chartTabIndex.fzqs = val;
					this.fzqsChartSet();
					break;
				case "qxxqs":
					this.chartTabIndex.qxxqs = val;
					this.qxxqsChartSet();
					break;
				case "dyfx":
					this.chartTabIndex.dyfx = val;
					this.dyfxChartSet();
					break;
				case "bwfzqs":
					this.chartTabIndex.bwfzqs = val;
					this.bwfzqsChartSet();
					break;
				case "plsjzs":
					this.chartTabIndex.plsjzs = val;
					this.plsjzsChartSet();
					break;
			}
		},
		certTabChange(val) {
			this.certtabIndex = val;
		},
	}
}
</script>

<style lang="scss" scoped>
.event-info{
	height: 100%;
	background-color: #F2F3F7;
}
.navbar-slot{
	width: 100%;
	justify-content: flex-end;
	padding-right: 40rpx;
}
.dataview{
	margin: 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;
	overflow: hidden;
	.top{
		padding: 20rpx;
		box-sizing: border-box;
		flex-wrap: wrap;
		border-bottom: 1rpx solid #F0F0F0;
		justify-content: space-between;
		.item{
			width: 290rpx;
			margin: 10rpx 15rpx;
			border: 1rpx solid #F0F0F0;
			border-radius: 8rpx;
			padding: 12rpx;
			box-sizing: border-box;
			justify-content: space-between;
			font-size: 26rpx;
			&:first-child{
				.value{
					color: #1E62FC;
				}
			}
		}
	}
	.bottom{
		padding: 20rpx;
		.media-a,.media-b{
			align-items: center;
		}
		.media-a{
			margin-bottom: 20rpx;
		}
		.label{
			font-size: 28rpx;
			margin-right: 20rpx;
		}
		.progress{
			flex: 1;
		}
		.count{
			width: 60rpx;
			font-size: 24rpx;
			margin-left: 10rpx;
			text-align: right;
		}
	}
}
.tab{
	border-radius: 20rpx 20rpx 0 0;
	width: 100%;
	justify-content: space-between;
	
	background-color: #fff;
	.tab-i{
		font-size: 28rpx;
		height: 80rpx;
		line-height: 40rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.tab-in{
		position: relative;
		font-weight: bold;
		color: #1E62FC;
		&::after{
			content: "";
			width: 40rpx;
			height: 6rpx;
			border-radius: 6rpx;
			background-color: #1E62FC;
			position: absolute;
			z-index: 1;
			left: 50%;
			bottom: 8rpx;
			transform: translateX(-50%);
		}
	}
}
.box{
	background-color: #fff;
	padding: 20rpx;
	.title{
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.content{
		font-size: 26rpx;
		text-align: justify;
	}
}
/deep/ .kw{
	color: #1E62FC;
}
.first-publish{
	.u-td{
		font-size: 24rpx !important;
		height: 106rpx !important;
	}
	.date{
		font-size: 24rpx !important;
		color: #999 !important;
	}
}
.context{
	.item{
		background-color: #F2F3F7;
		padding: 10rpx;
		.date{
			font-size: 24rpx;
			color: #999;
			margin-bottom: 10rpx;
		}
		.text{
			font-size: 26rpx;
		}
	}
}
/deep/ .u-dot{
	background-color: #1E62FC;
}
.chart-box{
	border: 1rpx solid #F2F2F2;
	box-sizing: border-box;
	margin-top: 20rpx;
}
.ctabs{
	justify-content: flex-end;
	padding: 20rpx;
}
.ctab{
	font-size: 26rpx;
	margin-left: 10rpx;
	cursor: pointer;
}
.on{
	color: #1E62FC;
}
.dytx-tabs{
	justify-content: flex-start;
	padding: 20rpx 0;
	.ctab{
		margin-left: 0;
		margin-right: 10rpx;
		padding: 15rpx 22rpx;
		background-color: #F2F3F7;
		border-radius: 10rpx;
	}
	.on{
		background-color: #1E62FC;
		color: #fff;
	}
}
.cert-tabs{
	justify-content: space-between;
	padding: 20rpx 0;
	margin-bottom: 20rpx;
	.ctab{
		margin-left: 0;
	}
	.on{
		color: #1E62FC;
		font-weight: bold;
	}
}
.chart{
	width: 100%;
	height:500rpx;
}
.mt-20{
	margin-top: 20rpx;
}
.subtitle{
	font-size: 24rpx;
	font-weight: bold;
	margin: 10rpx 0;
}
.cert-list{
	flex-wrap: wrap;
	.cert-i{
		width: 50%;
		margin-bottom: 20rpx;
		.cert-info{
			margin-left: 10rpx;
		}
		.uname{
			font-size: 26rpx;
			align-items: center;
			margin-bottom: 6rpx;
		}
		.count{
			font-size: 24rpx;
			.count-a{
				color:#999;
			}
			.count-b{
				color: #1E62FC;
				font-weight: bold;
			}
		}
	}
}
.v-1,.v-2{
	margin-left: 5rpx;
	width: 26rpx;
	height: 26rpx;
	background: url("./../../static/cert-1.png") no-repeat center/contain;
}
.v-2{
	background: url("./../../static/cert-2.png") no-repeat center/contain;
}
.media-cards{
	flex-wrap: wrap;
	justify-content: space-between;
	.media-card{
		justify-content: space-between;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx 15rpx;
		width: 348rpx;
		margin-bottom: 20rpx;
		color: #fff;
		.l-title{
			font-size: 28rpx;
		}
		.l-count{
			margin-top: 10rpx;
		}
		.r{
			background-color: transparent;
		}
		.u-progress-info{
			font-size: 22rpx;
		}
	}
	.media-card-1{
		background: linear-gradient(135deg, #ff7768, #e65441);
	}
	.media-card-2{
		background: linear-gradient(135deg, #fbc56a, #e6960c);
	}
	.media-card-3{
		background: linear-gradient(135deg, #6dc7f7, #50c7f1);
	}
	.media-card-4{
		background: linear-gradient(135deg, #88c3f9, #5090f1);
	}
}
.media-list{
	text-align: center;
	max-height: 580rpx;
	.thead{
		font-size: 28rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #F0F0F0;
		padding-bottom: 10rpx;
	}
	.tr{
		border-bottom: 1rpx solid #F0F0F0;
		padding: 10rpx 0;
		font-size: 26rpx;
		.col-3{
			color: #1E62FC;
			font-weight: bold;
		}
	}
	.col-1{
		width: 60rpx;
	}
	.col-2{
		flex: 1;
		padding-left: 10rpx;
		box-sizing: border-box;
	}
	.col-3{
		width: 130rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}
	.col-4{
		width: 120rpx;
	}
	.no-1{
		color: #E65441;
		font-weight: bold;
	}
	.no-2{
		color: #E6960C;
		font-weight: bold;
	}
	.no-3{
		color: #5090F1;
		font-weight: bold;
	}
	.empty{
		width: 100%;
		color: #999;
		font-size: 24rpx;
		text-align: center;
		padding-top: 40rpx;
	}
}

.dvpl-list{
	min-height: 100rpx;
	.dvpl-i{
		margin-bottom: 20rpx;
	}
	.no{
		font-size: 28rpx;
		line-height: 30rpx;
		color: #666;
		margin-top: 4rpx;
	}
	.red{
		color: #E65441;
		font-weight: bold;
	}
	.empty{
		width: 100%;
		color: #999;
		font-size: 24rpx;
		text-align: center;
		padding-top: 40rpx;
	}
	.info{
		margin-left: 10rpx;
	}
	.des{
		flex-wrap: wrap;;
		span{
			font-size: 24rpx;
			color: #888;
			margin-right: 14rpx;
		}
	}
}
.vp-list{
	.vp-i{
		.content{
			justify-content: space-between;
		}
		.l{
			width: 550rpx;
			font-size: 30rpx;
		}
		.count{
			font-size: 28rpx;
			font-weight: bold;
			margin-right: 10rpx;
		}
		.ratio{
			font-size: 24rpx;
		}
	}
}
.focus-list{
	min-height: 100rpx;
	.wb-i{
		border-bottom: 1rpx solid #F0F0F0;
		padding-top: 20rpx;
	}
	.user{
		padding-top: 10rpx;
		margin-left: 20rpx;
	}
	.uname{
		font-size: 30rpx;
		align-items: center;
	}
	.date{
		font-size: 28rpx;
		color: #666;
		padding-top: 6rpx;
	}
	.content{
		margin: 20rpx 0;
		font-size: 30rpx;
	}
	.empty{
		width: 100%;
		color: #999;
		font-size: 24rpx;
		text-align: center;
		padding-top: 40rpx;
	}
}
.qxxfb{
	justify-content: space-around;
	.u-progress-info {
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
	}
	.u-progress-dot {
		font-size: 24rpx;
	}
	.count{
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 10rpx;
	}
}
.chart-box-wmxbfb{
	position: relative;
	z-index: 1;
	.count{
		text-align: center;
		position: absolute;
		z-index: 999;
		top: 55%;
		left: 50%;
		transform: translate(-50%,-55%);
	}
	.count-a{
		font-weight: bold;
	}
	.count-b{
		font-size: 24rpx;
	}
}
.chart-box-mtly{
	position: relative;
	z-index: 1;
	.count{
		text-align: center;
		position: absolute;
		z-index: 999;
		top: 60%;
		left: 50%;
		transform: translate(-50%,-60%);
	}
	.count-a{
		font-weight: bold;
	}
	.count-b{
		font-size: 24rpx;
	}
}
.chart-fzqs{
	height: 750rpx;
}
.chart-qxxqs{
	height: 650rpx;
}
.chart-wmxbfb{
	height: 580rpx;
}
.chart-dyfx{
	height: 600rpx;
	background-color: #F2F3F7;
	margin-top: 10rpx;
}
.chart-bzdy{
	height: 600rpx;
	background-color: #F2F3F7;
}
.chart-mtly{
	height: 600rpx;
}
.chart-mthy{
	height: 700rpx;
}
.empty{
	width: 100%;
	color: #999;
	font-size: 24rpx;
	text-align: center;
}
.loading-box{
	position: relative;
}
.loading{
	position: absolute;
	z-index: 100;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.7);
}
</style>
